<template>
  <div class="infro-container">
      <el-form ref="tijiao-form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="姓名" required  prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
             <el-form-item label="学习技能" required prop="xxjn">
                <el-input v-model="form.xxjn" placeholder="方向性的知识/前沿技术/前后端的相关...."></el-input>
            </el-form-item>
            <el-form-item label="擅长课程" required prop="kc">
              <el-input v-model="form.kc" placeholder="计网/数据结构/c语言...."></el-input>
            </el-form-item>
             <el-form-item label="个人简介" required prop="grjj">
                <el-input type="textarea" v-model="form.grjj" placeholder="兴趣爱好，读书生活，励志名言等（不少于20字）"></el-input>
            </el-form-item>
            <el-form-item label="校园经历--生活篇" required prop="xyjlsh">
                <el-input type="textarea" v-model="form.xyjlsh" placeholder="参与的社团，兴趣小组，活动（不少于20字）"></el-input>
         </el-form-item>
           <el-form-item label="校园经历--学习篇" required prop="xyjlxx">
                <el-input type="textarea" v-model="form.xyjlxx" placeholder="竞赛奖项，项目迭代，奖学金等（不少于20字）"></el-input>
            </el-form-item>
            <el-form-item label="班内序号" required prop="number">
                <el-input v-model.number="form.number" placeholder="数字(1-35)"></el-input>
            </el-form-item>
            <el-form-item label="迭代三项目组名" required prop="groupname">
                必须写全名<el-input v-model="form.groupname" placeholder="web组/智能小车组/智能导购车组/维御组/人脸识别组"></el-input>
            </el-form-item>
            <el-form-item>
                <Debounce :time="2000" events="click" required>
            <el-button type="warning" class="tijiao" @click.native="test()">提交</el-button>
                </Debounce>
        </el-form-item>
    </el-form>
    <div class="bottom"></div>
    <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%" append-to-body
  :before-close="handleClose">
  <span>请确认信息无误并保证信息与个人实际情况符合后点击确认按键</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="warning" @click="tijiao">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
import { submit } from '@/utils/api/test'
import '@/utils/plugins/debounce'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      dialogVisible: false,
      form: {
        name: '',
        groupname: '',
        kc: '',
        number: '',
        xxjn: '',
        xyjlsh: '',
        xyjlxx: '',
        grjj: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名字', trigger: 'blur' },
        ],
        groupname: [
          { required: true, message: '请输入完整组名', trigger: 'blur' },
        ],
        kc: [
          { required: true, message: '请输入擅长的课程', trigger: 'blur' },
        ],
        xxjn: [
          { required: true, message: '请输入学习技能', trigger: 'blur' },
        ],
        xyjlsh: [
          { required: true, message: '请输入生活相关', trigger: 'blur' },
        ],
        xyjlxx: [
          { required: true, message: '请输入学习竞赛相关，没有的话填暂无', trigger: 'blur' },
        ],
        grjj: [
          { required: true, message: '请好好描述一下自己', trigger: 'blur' },
        ],
      }
    }
  },
  methods: {
    test () {
      this.$refs['tijiao-form'].validate(valid => {
        if (!valid) {
          return
        }
        this.dialogVisible = true
      })
    },
    tijiao () {
      this.dialogVisible = false
      submit(this.form).then(res => {
        if (res.data.code === 200) {
          console.log(res.data)
          this.$message({
            type: 'success',
            message: '提交成功',
          })
        } else {
          this.$message.error('提交失败，网络或内容错误')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.infro-container{
    margin-top: 10px;
}
/deep/.el-input__inner{
    width: 350px;
}
.bottom{
    height: 300px;
}

/deep/.el-form-item__label{
  float:none;
}
</style>
